<template>
  <view class="page-home">
    <topbar :tabs="tabs" :active="getActive" @change="changeTab"></topbar>
    <view class="page-ticket">
      <view
        class="ticket-card"
        v-for="(item, index) in ticketGroup"
        :key="index"
      >
        <view class="title">{{ item.title }}</view>
        <view
          class="tiket-item flex-between"
          v-for="(v, i) in item.list"
          :key="i"
        >
          <view class="left">
            <view class="ticket-name">{{ v.name }}</view>
            <view class="ticket-msg">{{ `随买随用 | 无忧退` }}</view>
          </view>
          <view class="right">
            <view class="price primary-color">￥{{ v.price }}</view>
            <view class="mini-btn" @click="get_details(v)">预定</view>
          </view>
        </view>
      </view>
    </view>
    <uni-calendar
      :showMonth="false"
      :start-date="nowDay"
      ref="calendar"
      :insert="false"
      @confirm="confirm"
    />
    <SignUp ref="signUp" />
  </view>
</template>

<script>
import ImageFile from "../../components/img_file.vue";
import { mobileList } from "../../api/ticket/index.js";
import { dayjs } from "@/uni_modules/iRainna-dayjs/js_sdk/dayjs.min.js";
export default {
  components: {
    ImageFile,
  },
  data() {
    return {
      nowDay: dayjs().format("YYYY-MM-DD"),
      tabs: [
        { title: "今日", key: "1" },
        { title: "明日", key: "2" },
        { title: "更多日期", key: "dateSelect" },
      ],
      query: {
        pageSize: 999,
        currentPage: 1,
      },
      is_loading: false,
      data_list: [],
      path: "",
      active: "1",
      selectDate: "",
      ticketGroup: [],
    };
  },
  created() {
    this.path = uni.getStorageSync("host") || "";
    this.get_data_list();
  },
  computed: {
    getActive() {
      if (this.selectDate) {
        return "dateSelect";
      } else {
        return this.active;
      }
    },
  },
  methods: {
    confirm(e) {
      this.selectDate = e.fulldate;
      this.tabs[2].title = e.fulldate;
      this.active = "dateSelect";
      this.get_data_list();
    },
    changeTab(e) {
      if (e == "dateSelect") {
        this.$refs.calendar.open();
      } else {
        this.selectDate = "";
        this.tabs[2].title = "更多日期";
        this.active = e;
        this.get_data_list();
      }
    },
    open() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    get_details(val) {
      const userInfo = uni.getStorageSync("userInfo");
      if (!userInfo.phone) {
        return this.$refs.signUp.open(); //改为弹窗注册
      }
      // 点击跳转详情
      uni.setStorageSync("details", val);
      console.log(val, "val--");
      uni.navigateTo({
        url: `/pages/ticket/ticket/details`,
      });
    },
    get_data_list() {
      this.is_loading = true;
      const dates = {
        1: {
          startTime: dayjs().format("YYYY-MM-DD 00:00:00"),
          endTime: dayjs().format("YYYY-MM-DD 23:56:59"),
        },
        2: {
          startTime: dayjs().add(1, "day").format("YYYY-MM-DD 00:00:00"),
          endTime: dayjs().add(1, "day").format("YYYY-MM-DD 23:56:59"),
        },
        dateSelect: {
          startTime: dayjs(this.selectDate).format("YYYY-MM-DD 00:00:00"),
          endTime: dayjs(this.selectDate).format("YYYY-MM-DD 23:56:59"),
        },
      };
      uni.showLoading();
      mobileList({
        ...this.query,
        ...dates[this.active],
      })
        .then((res) => {
          uni.hideLoading();
          const { records, current, pages } = res.body;
          this.data_list = records;
          const groups = records.reduce((pre, cur) => {
            if (cur.groupList) {
              pre = [...new Set([...pre, ...cur.groupList.map((v) => v.name)])];
            }
            return pre;
          }, []);
          let groupList = groups.map((v) => {
            return {
              title: v,
              list: records.filter(
                (it) => it.groupList && it.groupList.some((vl) => vl.name === v)
              ),
            };
          });
          if (records.some((v) => !v.groupList)) {
            groupList.push({
              title: "",
              list: records.filter((v) => !v.groupList),
            });
          }
          console.log(groupList, "--------------");
          this.ticketGroup = groupList;

          // 当前页大于总页 显示没有更多了
          if (current >= pages) {
            this.is_loading = true;
          } else {
            this.is_loading = false;
          }
        })
        .catch((error) => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-home {
  width: 100%;
  /* height: calc(100vh - 126upx); */
  height: calc(100vh - 156upx);
}
.page-ticket {
  /* height: 100%; */
  // background-color: #f3f4f6;
  padding: 30rpx 0;
  padding-bottom: 160rpx;
  .ticket-card {
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 30rpx;
    .title {
      padding: 20rpx 0;
      font-size: 36rpx;
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .tiket-item {
      background-color: #f3f4f6;
      margin-bottom: 30rpx;
      padding: 20rpx 30rpx;
      border-radius: 10rpx;
      .left {
        .ticket-name {
          font-size: 32rpx;
          font-weight: bold;
        }
        .ticket-msg {
          font-size: 24rpx;
          color: #ff6600;
          margin-top: 30rpx;
        }
      }
      .right {
        min-width: 110rpx;
        .price {
          font-size: 34rpx;
          font-weight: bold;
          text-align: right;
          margin-bottom: 20rpx;
        }
        .mini-btn {
          display: inline-block;
          padding: 8rpx 20rpx;
          background-color: #5cc39d;
          border-radius: 28rpx;
          color: #fff;
          font-size: 26rpx;
          display: flex;
          justify-content: center;
          padding-bottom: 5px;
        }
        .add-sub {
          width: 180rpx;
          .add-sub-btn {
            width: 40rpx;
            font-size: 34rpx;
            height: 40rpx;
            color: #5cc39d;
            background-color: #fff;
          }
        }
      }
    }
  }
}
</style>
